<template>
	<view class="base-info-container">
		<uv-form
			labelPosition="top"
			labelWidth="90px"
			errorType="toast"
			ref="form"
			:labelStyle="{ fontSize: '30rpx', color: '#767a82' }"
			:rules="rules"
			:model="company"
		>
			<uv-form-item label="LOGO" labelPosition="left" borderBottom>
				<button class="avatar-wrapper" @click="uploadAvatar">
					<image class="avatar" mode="aspectFill" :src="tempFilePath || company.logo"></image>
				</button>
			</uv-form-item>
			<uv-form-item label="公司全称" borderBottom required prop="fullName">
				<uv-input v-model="company.fullName" placeholder="请输入公司全称"></uv-input>
			</uv-form-item>
			<uv-form-item label="公司简称" borderBottom required prop="name">
				<uv-input v-model="company.name" placeholder="请输入公司简称"></uv-input>
			</uv-form-item>
			<uv-form-item label="所属行业" borderBottom required prop="industryName">
				<picker range-key="name" :range="industryArray" @change="changeIndustry">
					<uv-input v-model="industryName" disabled placeholder="请选择行业"></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="公司性质" borderBottom required prop="nature">
				<picker :range="natureArray" @change="changeNature">
					<uv-input v-model="company.nature" disabled placeholder="请选择性质"></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="人员规模" borderBottom required prop="scale">
				<picker :range="scaleArray" @change="changeScale">
					<uv-input v-model="company.scale" disabled placeholder="请选择规模"></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
		</uv-form>

		<view class="confirm bottom"><button class="button" @click="handleSubmit">保存</button></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { scaleArray, natureArray } from '../const.js';
import { getIndustryList, updateCompanyBaseInfo } from '@/apis/company/index.js';
import { getCredential } from '@/apis/cos.js';
import { uploadFile } from '@/utils/index.js';

export default {
	data() {
		return {
			tempFilePath: '', // 头像临时路径
			scaleArray, // 人员规模列表
			natureArray, // 公司性质列表
			industryArray: [], // 所属行业列表
			industryName: '', // 行业名称
			company: {
				logo: '',
				name: '',
				fullName: '',
				industryId: null,
				nature: '',
				scale: ''
			},
			rules: {
				name: { required: true, trigger: 'blur', message: '公司简称不能为空' },
				fullName: { required: true, trigger: 'blur', message: '公司全称不能为空' },
				nature: { required: true, trigger: 'chang', message: '请选择公司性质' },
				scale: { required: true, trigger: 'chang', message: '请选择人员规模' },
				industryName: [
					{
						required: true,
						trigger: 'chang',
						validator: () => {
							return !!this.industryName;
						},
						message: '请选择所属行业'
					}
				]
			}
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onReady() {
		this.$refs['form'].setRules(this.rules);
	},
	mounted() {
		this.initData();
	},
	methods: {
		async initData() {
			const res = await getIndustryList({ page: 1, size: 999, pid: 0 });
			this.industryArray = res.data.list;

			const { logo, name, fullName, industryId, nature, scale } = uni.getStorageSync('company');
			this.company = { logo, name, fullName, industryId, nature, scale };

			const industry = this.industryArray.find(item => item.id === industryId);
			if (industry) this.industryName = industry.name;
		},
		// 上传头像
		uploadAvatar() {
			uni.chooseMedia({
				count: 1,
				mediaType: ['image'],
				success: e => {
					this.tempFilePath = e.tempFiles[0].tempFilePath;
				}
			});
		},
		changeNature(e) {
			this.company.nature = this.natureArray[e.target.value];
		},
		changeScale(e) {
			this.company.scale = this.scaleArray[e.target.value];
		},
		changeIndustry(e) {
			const { id, name } = this.industryArray[e.target.value];
			this.company.industryId = id;
			this.industryName = name;
		},
		// 保存
		handleSubmit() {
			this.$refs['form']
				.validate()
				.then(async () => {
					if (this.tempFilePath) {
						const suffix = this.tempFilePath.substr(this.tempFilePath.lastIndexOf('.') + 1);
						const opt = await getCredential(suffix, 'logo');
						const logo = await uploadFile(opt.data, this.tempFilePath);
						this.company.logo = logo;
					}
					updateCompanyBaseInfo(this.userInfo.companyId, this.company).then(res => {
						if (res.code === 200) {
							uni.showToast({ icon: 'success', title: '保存成功' });
							const time = setTimeout(() => {
								clearTimeout(time);
								uni.navigateBack();
							}, 1000);
						}
					});
				})
				.catch(error => {
					return false;
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
</style>

<style lang="scss" scoped>
.base-info-container {
	padding: 30rpx;
	::v-deep .uv-input__content__prefix-icon {
		margin-right: 0;
	}
}

.avatar-wrapper {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding-right: 0;
	background: none;
	&::after {
		border: none;
	}
	image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 100%;
	}
}
</style>
